<template>
  <div class="editAdv-box">
    <el-form ref="form" :model="editFrom" label-width="100px" label-position="left">
        <el-form-item label="广告位置">
            <el-select v-model="editFrom.location" placeholder="广告位置">
                <el-option label="推荐页" value="推荐页"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="跳转页面">
            <el-cascader v-model="editFrom.to" :options="options"></el-cascader>
        </el-form-item>
        <el-form-item label="广告图片">
            <el-upload
                class="avatar-uploader"
                action="#"
                :on-change="addAdvImg"
                :show-file-list="false">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <p class="avatar-txt">图片尺寸1944*360，支持png/jpg格式，大小不超过500KB</p>
        </el-form-item>
        <el-form-item label="状态">
            <el-radio-group v-model="editFrom.state">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>
    <SubBtn>
        <template slot="btn">
            <el-button round>重设</el-button>
            <el-button type="primary" round>保存</el-button>
        </template>
    </SubBtn>
  </div>
</template>

<script>
import SubBtn from "@/wss/components/subBtn.vue";
export default {
    name:'EditAdv',
    components:{SubBtn},
    data(){
        return{
            // 编辑的表单
            editFrom:{
                location:'',
                to:'',
                img:'',
                state: true,
            },
            imageUrl:'',//上传的图片
            //跳转位置数据
            options:[
                {
                    value: '1',
                    label: '咨询',
                    children:[{
                        value: '11',
                        label: '合同',
                    },{
                        value: '12',
                        label: '合同2',
                    }]
                },
                {
                    value: '2',
                    label: '解答',
                    children:[{
                        value: '21',
                        label: '解答1',
                    },{
                        value: '22',
                        label: '解答2',
                    }]
                }
            ]
        }
    },
    methods:{
        //上传图片
        addAdvImg(file,fileList){
            this.editFrom.img = file
            this.imageUrl=URL.createObjectURL(file.raw);
        },
    },
}
</script>

<style scoped>
.editAdv-box{
    margin-bottom: 60px;
}
::v-deep .el-select > .el-input.is-focus .el-input__inner,
::v-deep .el-cascader > .el-input.is-focus .el-input__inner{
  border-color: #ECEDF0;
}
.el-select-dropdown .el-select-dropdown__item.selected{
  color: #F87A23;
}
.editAdv-box .el-form-item >>> .el-form-item__label{
  color: #2E3F5E;
}

.editAdv-box .el-form-item .el-select,
.editAdv-box .el-form-item .el-select >>> .el-input,
.editAdv-box .el-form-item .el-cascader{
    width: 100%;
}

.editAdv-box >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.editAdv-box >>> .el-upload:hover {
    border-color: #F87A23;
}
.editAdv-box .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 100%;
    display: block;
}
.avatar-txt{
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #929BAB;
    margin: 0;
}

::v-deep .el-form-item .el-radio__input.is-checked .el-radio__inner{
    border-color: #F87A23;
    background: #F87A23;
}
::v-deep .el-form-item .el-radio__input.is-checked + .el-radio__label{
    color: #F87A23;
}
::v-deep .el-form-item .el-radio__input .el-radio__inner::after{
    background: #F87A23;
    border: 2px solid #fff;
    width: 11px;
    height: 11px;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px;
}
::v-deep .subBtn .el-button{
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn .el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>
<style>
.el-select-dropdown .el-select-dropdown__item.selected,
.el-popper .el-cascader-node.in-active-path, 
.el-popper .el-cascader-node.is-selectable.in-checked-path, 
.el-popper .el-cascader-node.is-active{
  color: #F87A23;
}
</style>